<template>
  <el-card v-loading="loading" class="bg">
    <div class="container">
      <div class="head-title">东软空气质量环保公众监督平台</div>
      <div class="time-display">{{ time }}</div>
      <div class="left-section">
        <div class="gauge">
          <dv-border-box-12 class="chart-box">
            <GaugeChart />
          </dv-border-box-12>
        </div>
        <div class="pie">
          <dv-border-box-12 class="chart-box">
            <PieChart />
          </dv-border-box-12>
        </div>
        <div class="line">
          <dv-border-box-12 class="chart-box">
            <div class="line-chart-container">
              <LineChart />
            </div>
          </dv-border-box-12>
        </div>
      </div>

      <div class="middle-section">
        <dv-border-box-12 class="chart-box">
          <div class="map">
            <MapChart />
          </div>
        </dv-border-box-12>
        <dv-border-box-12 class="number-chart">
          <NumberChart />
        </dv-border-box-12>
      </div>

      <div class="right-section">
        <dv-border-box-12 class="chart-box">
          <div class="bar-chart-container">
            <BarChart1 />
          </div>
        </dv-border-box-12>
        <dv-border-box-12 class="chart-box">
          <div class="bar-chart-container">
            <BarChart2 />
          </div>
        </dv-border-box-12>
        <dv-border-box-12 class="chart-box">
          <div class="bar-chart-container">
            <BarChart3 />
          </div>
        </dv-border-box-12>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts" name="dataScreen">
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import dayjs from "dayjs";
import PieChart from "./components/PieChart.vue";
import LineChart from "./components/LineChart.vue";
import GaugeChart from "./components/GaugeChart.vue";
import MapChart from "./components/MapChart.vue";
import BarChart1 from "./components/BarChart1.vue";
import BarChart2 from "./components/BarChart2.vue";
import BarChart3 from "./components/BarChart3.vue";
import NumberChart from "./components/NumberChart.vue";
const router = useRouter();
const dataScreenRef = ref<HTMLElement | null>(null);

// * 加载标识
const loading = ref<boolean>(true);

// 获取当前时间
let timer: NodeJS.Timer | null = null;
let time = ref<string>(dayjs().format("YYYY年MM月DD日 HH:mm:ss"));
timer = setInterval(() => {
  time.value = dayjs().format("YYYY年MM月DD日 HH:mm:ss");
}, 1000);

onBeforeUnmount(() => {
  window.removeEventListener("resize", resize);
  clearInterval(timer as unknown as number);
});

// todo 处理 loading 展示
const cancelLoading = () => {
  setTimeout(() => {
    loading.value = false;
  }, 500);
};

// 设置响应式
const resize = () => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};

// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};

onMounted(() => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    dataScreenRef.value.style.width = `1920px`;
    dataScreenRef.value.style.height = `1080px`;
  }
  window.addEventListener("resize", resize);
  cancelLoading();
});
</script>

<style lang="scss" scoped>
@import "../../assets/scss/index.scss";
</style>
